import React, { useState, useEffect, useRef } from 'react'
import './componentsPageWrapper.scss'
import { connect } from 'react-redux'
import { useHistory } from "react-router-dom";
import * as ACTCreator from '@store/actionCreators'
// import AsyncPage from '@components/AsyncPage/asyncPage'
import { Sketch } from '@components/Sketch/sketch'
import { LOAD_STATE } from '@util/state.js'
import { Path } from '@config/path.js'
               
export const ComponentsPageWrapper = connect(
    state => ({
        main: state.main,
    }),
    dispatch => ({
        setLeftMenuActive: val => dispatch(ACTCreator.setLeftMenuActive(val)),
    }))(
    React.memo(
        props => {
            const cmpStr = props.currentRouter.slice(props.currentRouter.lastIndexOf("/") + 1)

            let history = useHistory()
            const [AsyncCmp, setAsyncCmp] = useState(null)
            const [ready, setReady] = useState(LOAD_STATE.LOADING) 
            
            useEffect(() => {
                setReady(() => LOAD_STATE.LOADING)
                setAsyncCmp(() => null)
                import(`@pages/ComponentsPage/${cmpStr}/index.d.js`).then(
                    cmp => {
                        setAsyncCmp(() => cmp.default)
                        props.setLeftMenuActive(cmpStr)
                    }
                ) 
            }, [props.currentRouter])
            
            return  <div className="router_wrapper">
                        {
                            <Sketch
                                mask={Mask}
                                show={ready}
                            >
                                <div className="actual_content">
                                    {
                                        AsyncCmp && <AsyncCmp cmpReady={setReady}/>
                                    }
                                </div>
                            </Sketch>
                        }
                    </div>
        }
    )
)

const Mask = () => {
    return  <div className="sketch_mask">
                <div className="box">
                    <div className="loading"></div>
                </div>
            </div>
}